<template>
  <div class="wik-document">
    <Table
      :data="tableData"
      :columns="tableColumns"
      :options="{
        headerFixed: true
      }"
    >
      <template #processId="{ scope }">
        {{ getDictItem("mileStage", scope.processId) }}
      </template>
      <template #userId="{ scope }">
        {{ listAllUser.find((item: any) => item.id === scope.userId)?.name || "--" }}
      </template>
      <template #endTime="{ scope }">
        {{ formatHandler(scope.endTime) }}
      </template>
      <template #planEndTime="{ scope }">
        {{ formatHandler(scope.planEndTime) }}
      </template>
    </Table>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import dayjs from "dayjs";
import { getListAllUser } from "@/api/modules/sys";
import Table from "@/components/Table/index.vue";
import { TableData, TableColumn } from "@/components/Table/interface";
import { useDict } from "@/hooks/useDict";
const { getDictItem } = useDict(["mileStage"]);
const listAllUser = ref<any>([]);

const { orderDetail } = defineProps({
  orderDetail: {
    type: Object,
    default: () => {}
  }
});
const tableData = ref<TableData[]>(orderDetail?.orderMilestoneList || []);

const tableColumns = ref<TableColumn[]>([
  {
    type: "index",
    title: "编号",
    key: "serialNumber",
    width: 46
  },
  {
    title: "车型",
    key: "productName"
  },
  {
    title: "事项",
    key: "processId",
    width: 320
  },
  {
    title: "负责人",
    key: "userId"
  },
  {
    title: "计划结束",
    key: "planEndTime"
  },
  {
    title: "实际结束",
    key: "endTime"
  }
]);

const formatHandler = (val: any) => {
  return val ? dayjs(val).format("YYYY年MM月DD日") : "--";
};
// 获取全部用户
const getListAllUserFn = async () => {
  const { data } = await getListAllUser();
  listAllUser.value = data;
};
onMounted(() => {
  getListAllUserFn();
});
</script>
<style lang="scss" scoped>
.wik-document {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-bottom: 10px !important;
  box-sizing: border-box;
}
</style>
